<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="oldVue.js"></script>



</head>

<body>

    <div id="app">
        <!--this is comment-->
        <!-- {{ message }} -->
        <div>我是静态节点</div>
        <div  v-once v-if='showDom'>我只渲染一次</div>
        <div v-if='showDom'>我是动态节点</div>
        <!-- <input class="full-input" :type="texts | recordType" v-model='message' placeholder="请输入" /> -->
    </div>
    <div id="app1">
        <div>
            <!--count={{count}}-->
            <!--reversedCount={{reversedCount}}-->
        </div>


    </div>


    <script>
        debugger;
        var app = new Vue({
            el: '#app',
            beforeCreate() {
                console.log(this,'====beforeCreate钩子函数')
            },
            created() {},
            beforeMount() {},
            mounted: () => { //挂载元素，获取到DOM节点
                setTimeout(() => {
                    //this.count+=1;
                    //console.log('this.count='+this.count)
                }, 1000)
            },
            beforeUpdate() {},
            updated() {},//挂载元素，获取到DOM节点
            beforeDestroy() {},
            destroyed() {},
            data: function () {
                return {
                    count: 0,
                    showDom: true,
                    texts:"text",
                    message: 'Hello Vue!'
                }
            },
            filters: {
                recordType(data) {
                    console.log('过滤我们的type')
                    return 'text';
                }
            },
            //data: {
            //     count:0,
            //     message: 'Hello Vue!'
            //}
        })

        /*执行步骤： 

        1. 初始化vue，挂载_init方法
           initMixin(Vue) Vue是一个构造函数，
           Vue原型上挂载一个_init方法，这一步只是挂载方法，并没有执行。
        
        2. 初始化vue，数据绑定，$watch方法
           stateMixin(Vue) Vue是一个构造函数，
           Vue原型上挂载一个_init方法，这一步只是挂载方法，并没有执行。
           定义一个data对象，一个props对象，并分别给这个2个对象添加get和set方法属性.

           Object.defineProperty(Vue.prototype, '$data', dataDef); 此时Vue.prototype上只有刚挂载的_init方法
           Object.defineProperty(Vue.prototype, '$props', propsDef);
           然后执行Object.defineProperty，通过设定对象属性的 setter/getter 方法来监听数据的变化，
           通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

           

        1. 安装组件
        mountComponent(
            vm,  //Vue 实例
            el,  //真实dom
            hydrating //新的虚拟dom vonde
        )

        判断编译的版本是Runtime + Compiler 还是 Runtime only

        2. 执行生命周期函数
        callHook(
            vm,  //Vue 实例
            hook //钩子函数的key  这里传的是beforeMount
        )

        3. 将观察者watch推入到目标堆栈中targetStack
        pushTarget(
            _target //watch 此时传的是空
        )

        4. 第二步执行完后，马上获取vm实例中的钩子(这里指的是beforeMount，它实际是个数组，数组里面有对应的钩子函数)赋值给handlers，
           遍历handlers，执行每一个钩子函数，并用call将钩子函数中的this指向vm

        5. 然后判断实例中是否有_hasHookEvent

           _hasHookEvent： 开启条件 =》 $on注册事件是hook:开头的并且是单个事件处理程序。    
                           当实例注册了hook:开头的事件后，会在生命周期钩子函数调用时触发对应的hook事件，
                           例如hook:created、hook:mounted等,他是指从外部注入生命周期事件，
                           比如第三方的Vue组件el-select，我想从外部注入mounted生命周期函数。 
                            <el-select ref="select" @hook:mounted="callback"></el-select>
                            // 获取select实例注册
                            this.$refs['select'].$on('hook:mounted', function() {})   

            如果存在_hasHookEvent，说明我们子组件上挂载了hook事件，这时子组件抛出hook:hook事件(如vm.$emit('hook:mounted'),所以父组件
            通过@hook:mounted就能接收到子组件触发的生命周期函数,从而执行我们的callback
        
        6. 执行popTarget，将目标堆栈中targetStack刚加入的pushTarget删除,再设置Dep.target为删除的pushTarget（不存在就是undefined）

        7. callHook执行完毕，这几步执行完了生命周期相关的函数

        8. 
        */




        // var app1 = new Vue({
        //     comments: true,
        //     el: '#app1',
        //     beforeCreate() {

        //     },
        //     created() {

        //     },
        //     beforeMount() {

        //     },
        //     methods: {
        //         click: function () {
        //             console.log('点击事件')
        //         }
        //     },
        //     mounted: function () { //挂载元素，获取到DOM节点
        //         setTimeout(() => {
        //             console.log(this.count)
        //             this.count++;
        //             console.log('this.count=')
        //             console.log(this.count)
        //         }, 1000)
        //     },
        //     computed: {
        //         // 计算属性的 getter
        //         reversedCount: function () {
        //             // `this` 指向 vm 实例
        //             return this.count++;
        //         }
        //     },

        //     beforeUpdate() {

        //     },
        //     updated() { //挂载元素，获取到DOM节点
        //     },
        //     beforeDestroy() {

        //     },
        //     destroyed() {

        //     },
        //     data: {
        //         count: 0,

        //         message: 'Hello Vue!2222'
        //     }
        // })
    </script>

</body>

</html>